<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/jsp/header.jsp" %>
    <title>学习中心</title>
</head>
<body>
<%@ include file="/WEB-INF/jsp/nav.jsp" %>
    
<div id="mainDiv" class="container" style="margin-top:35px;">
        <style>
            .panel-body a{
                cursor: pointer;
                display:block;
                margin-bottom4px;
            }
        </style>
        <div class="row">
            <div class="col-xs-6">
                <!-- 我的课程 -->
                <div class="panel panel-info">
                    <div class="panel-heading"> 
                        <h3 class="panel-title">我的课程</h3> 
                    </div> 
                    <div class="panel-body">
						<a href="<%=ctxPath%>/card/applyNext.do" target="_blank" style="color:red;margin-bottom: 20px;">申请新的学习卡 &gt;&gt;</a>
						<a href="<%=ctxPath%>/card/detail.do" target="_blank" style="color:red;margin-bottom: 20px;">上次学到这里 &gt;&gt;</a>
						<c:forEach items="${cards }" var="card">
							<a href="<%=ctxPath%>/card/detail.do?id=${card.id}" target="_blank" style="margin-bottom: 6px;">${card.name}</a>
						</c:forEach>
                    </div> 
                </div>
            </div>
             
            <div class="col-xs-6">
                <!-- 问题和提问 -->
                <div class="panel panel-danger">
                    <div class="panel-heading"> 
                        <h3 class="panel-title">问题和提问</h3> 
                    </div> 
                    <div class="panel-body">
                        <div> 
                            <a href="<%=ctxPath%>/question/ask.do" target="_blank" style="color:red;margin-bottom: 20px;">我要提问 &gt;&gt;</a>
                            <a href="<%=ctxPath%>/question/list.do" target="_blank"  style="color:red;margin-bottom: 20px;">所有问题列表 &gt;&gt;</a>
                        </div>
                        <div id="questionDiv" style="margin-top: 20px;">
                        <c:forEach items="${questions }" var="question">
                        	<a id="question${question.id }" onclick="$(this).remove()" href="<%=ctxPath %>/question/detail.do?id=${question.id}" target="_blank">您提问或者参与的此问题还没有解决</a>
                        </c:forEach>
                        </div>
                        <div id="audio01" style="display: none"></div>
                    </div> 
                </div>                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function getNotifications(){
            $.post("<%=ctxPath%>/notification.do","",function(ajaxResult){
                if (ajaxResult.status=="success"){
                    var notifications = ajaxResult.data;
                    if (notifications==null || notifications.length<1) {
                        return;
                    }
                    //播放有信息的提示声音
                    $("#audio01").html('<audio src="<%=ctxPath%>/audios/notify.mp3" autoplay="autoplay"></audio>');
                    //遍历所有的通知消息，把通知消息显示在页面上
                    for(var i=0; i<notifications.length; i++){
                        var questionId = notifications[i].questionId;
                        var content = notifications[i].content;
                        $("#question"+questionId).remove();
                        $("#questionDiv").append('<a class="blink" id="question'+questionId+'" onclick="$(this).remove()" href="<%=ctxPath%>/question/detail.do?id='+questionId+'" target="_blank">'+content+'</a>');
                    }
                }
            },"json");
        }
        $(function(){
            getNotifications();
            setInterval(function () {
                getNotifications();
            },10000);
            var i = 0;
            setInterval(function () {
                $(".blink").css("color",(i%2==0)?"red":"blue");
                i++;
            },500);
        });
    </script>
<%@ include file="/WEB-INF/jsp/footer.jsp" %>
</body>
</html>